<template>
  <div class="radar-block">
    <div class="title">工作能力</div>
    <div class="radar" ref="radar"></div>
  </div>
</template>

<script>
import * as echarts from "echarts/core";
import { TitleComponent, LegendComponent } from "echarts/components";
import { RadarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([TitleComponent, LegendComponent, RadarChart, CanvasRenderer]);

let option = {
  legend: {
    textStyle: { color: "#B9BEEB" },
    data: []
  },

  radar: {
    // shape: 'circle',
    indicator: [
      { name: "工作态度", max: 10 },
      { name: "沟通能力", max: 10 },
      { name: "管理能力", max: 10 },
      { name: "抗压能力", max: 10 },
      { name: "学习能力", max: 10 },
      { name: "组织能力", max: 10 }
    ],
    splitNumber: 0,
    axisLine: {
      show: false
    }
  },

  series: [
    {
      type: "radar",
      areaStyle: {
        backgroundColor: "#a00"
      },
      // itemStyle: {
      //   borderWidth: 0
      // },

      lineStyle: {
        width: 0
      },
      splitLine: { show: false },
      symbol: "none",
      data: [
        // {
        //   value: [855, 111, 555, 420, 874, 666],
        //   name: "测评标准",
        //   areaStyle: {
        //     color: {
        //       type: "linear",
        //       colorStops: [
        //         {
        //           offset: 0,
        //           color: "#90FDB8" // 0% 处的颜色
        //         },
        //         {
        //           offset: 1,
        //           color: "#F0C174" // 100% 处的颜色
        //         }
        //       ]
        //     },
        //     opacity: 0.64
        //   }
        // },
        // {
        //   value: [10, 522, 999, 444, 321, 777],
        //   name: "个人综合",
        //   areaStyle: {
        //     color: {
        //       type: "linear",
        //       colorStops: [
        //         {
        //           offset: 0,
        //           color: "rgba(235, 23, 210, 0.7)" // 0% 处的颜色
        //         },
        //         {
        //           offset: 1,
        //           color: "rgba(211, 33, 128, 0.7)" // 100% 处的颜色
        //         }
        //       ]
        //     },
        //     opacity: 0.7
        //   }
        // }
      ]
    }
  ]
};

export default {
  props: {
    dataArr: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  methods: {},
  mounted: function() {
    let chart = echarts.init(this.$refs["radar"]);
    let color = [
      "#90FDB8",
      "#F0C174",
      "rgba(235, 23, 210, 0.7)",
      "rgba(211, 33, 128, 0.7)"
    ];

    this.dataArr.forEach(r => {
      option.legend.data.push(r.name);

      option.series[0].data.push({
        ...r,
        areaStyle: {
          color: {
            type: "linear",
            colorStops: [
              {
                offset: 0,
                color: color[Math.floor(Math.random() * 4)] // 0% 处的颜色
              },
              {
                offset: 1,
                color: color[Math.floor(Math.random() * 4)] // 100% 处的颜色
              }
            ]
          },
          opacity: 0.64
        }
      });
    });

    chart.setOption(option);
  },
  components: {}
};
</script>
<style lang="scss">
.radar-block {
  .title {
    color: #fff;
  }
  .radar {
    margin: 20px 4px;
    width: 90%;
    height: 460px;
  }
}
</style>
